<template>
	<view class="l_pages">
		<jnavbar title="抽奖列表"></jnavbar>
		<scroll-view class="page_container tab_page_container" scroll-y>
			<view class="content_box">
				<view class="box_title">
					<text>所有抽奖</text>
					<view class="title_btn" @click="tojump">
						中奖列表
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="box_item" v-for="(item, index) in lottertlist" v-if="item.Config" :key="index" @click="stater(item.Config.style)">
					<view class="item_img">
						<vimage v-if="item.Config.style == 1" imgtype="1" src="static/images/prize.png"></vimage>
						<vimage v-if="item.Config.style == 2" imgtype="1" src="static/images/scratch.png"></vimage>
					</view>
					<view class="item_txt">
						<!-- <view class="title" v-if="item.Config.style == 1">{{九宫格抽奖}}</view> -->
						<view class="title">{{ item.Config.name }}</view>
						<view class="txt">抽奖介绍抽奖介绍抽奖介绍</view>
						<view class="time">截至时间：{{ item.end_time }}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import http from '@/common/http.js';
export default {
	data() {
		return {
			lottertlist: []
		};
	},
	async onLoad() {
		await this.$getWx
		this.getlottertlist();
	},
	methods: {
		//获取列表
		getlottertlist() {
			http('/lottery/list', {}, 'post').then(res => {
				this.lottertlist = res.data.msg;
			});
		},
		stater(list_id) {
			if (list_id) {
				this.Jumpurl({
					link: './index?id=' + list_id,
					type: 1
				});
			}
		},
		tojump() {
			this.Jumpurl({
				link: './prizelist',
				type: 1
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.page_container {
	background: #fafafa;
}

.content_box {
	width: 100vw;
	padding: 30rpx 30rpx 0;
	box-sizing: border-box;

	.box_title {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		letter-spacing: 2rpx;
		padding: 0 0 25rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title_btn {
			font-size: 24rpx;
		}
	}

	.box_item {
		width: 100%;
		padding: 40rpx;
		display: flex;
		align-items: center;
		background: #ffffff;
		box-shadow: 0px 3px 6px rgba(116, 116, 116, 0.11);
		margin-bottom: 40rpx;
		border-radius: 16rpx;

		.item_img {
			margin-right: 60rpx;
			width: 90rpx;
			height: 90rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.item_txt {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;

			.title {
				color: #000;
				font-size: 28rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}
		}
	}

	.box_item:last-child {
		margin-bottom: 0rpx;
	}
}
</style>
